<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>发送短信</title>
	</head>
	<body>
		<label for="phoneNum">手机号码：</label>
		<input type="text" name="phoneNum" id="phoneNum" value="" />
		<button class="btn">发送</button>
		<script type="text/javascript">
			window.addEventListener('load',function() {
				//获取按钮
				var btn = document.querySelector('.btn');
				//定义剩余时间
				var time = 30;
				//设置按钮的点击事件
				btn.addEventListener('click',function() {
					//将按钮设置为禁用状态
					this.disabled = true;
					//设置定时器,开始倒计时
					var timer = setInterval(function() {
						//判断时间是否为 0 
						if(time == 0) {
							//时间到了，清除计时器
							clearInterval(timer)
							//时间到了，解除按钮禁用状态
							btn.disabled = false;
							//按钮内容设置为 发送
							btn.innerHTML = '再次发送';
							//设置为原来的倒计时
							time = 30;
						} else {
							//时间还没到
							//设置按钮倒计时内容
							btn.innerHTML = '剩余' + time + '秒';
							//时间减一
							time--;
						}
					},1000)
					
				})
			})
		</script>
	</body>
</html>
